<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '收入明细',
  },
}
</route>
<template>
  <div class="income-page">
    <div class="model">
      <div class="income-list">
        <div class="item">
          <div class="price">￥0.00</div>
          <div class="text">可提现金额</div>
        </div>
        <div class="border"></div>
        <div class="item">
          <div class="price">￥0.00</div>
          <div class="text">未结算金额</div>
        </div>
      </div>
      <div class="tips">每月25号可提现上月确认完成的订单收入</div>
      <div class="custom-button button" @click="to('/pages-sub/income/withdraw')">去提现</div>
    </div>

    <div class="model">
      <div class="title">
        <div>今日概况</div>
        <div class="right active" @click="to('/pages-sub/income/list')">
          <span>查看明细</span>
          <span class="i-carbon-chevron-right icon"></span>
        </div>
      </div>

      <div class="content">
        <div class="item">
          <div class="text">预估收入</div>
          <div class="price">￥1.00</div>
        </div>
        <div class="item">
          <div class="text">付款订单数</div>
          <div class="price">1</div>
        </div>
      </div>
    </div>

    <div class="model">
      <div class="title">
        <div>本月概况</div>
        <div class="right active" @click="to('/pages-sub/income/list')">
          <span>查看明细</span>
          <span class="i-carbon-chevron-right icon"></span>
        </div>
      </div>

      <div class="content">
        <div class="item">
          <div class="text">预估收入</div>
          <div class="price">￥99.00</div>
        </div>
        <div class="item">
          <div class="text">付款订单数</div>
          <div class="price">10</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { to } from '@/utils/page'
// 下拉刷新
onPullDownRefresh(() => {
  uni.stopPullDownRefresh()
})
</script>
<style lang="scss" scoped>
.income-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 28rpx 30rpx;
  background-color: var(--bgc4);

  .model {
    padding: 30rpx;
    margin-bottom: 28rpx;
    background-color: #fff;
    border-radius: 30rpx 30rpx 40rpx;
    .income-list {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      padding: 10rpx 0 40rpx;
      .item {
        text-align: center;
        .price {
          font-size: 42rpx;
          font-weight: 600;
          color: var(--color1);
        }
        .text {
          margin-top: 16rpx;
          font-size: 27rpx;
          color: var(--color4);
        }
      }
      .border {
        width: 1rpx;
        height: 100rpx;
        background-color: #e7e7e7;
      }
    }
    .tips {
      font-size: 23rpx;
      color: var(--color5);
      text-align: center;
    }

    .button {
      width: 374rpx;
      margin: 32rpx auto 20rpx;
    }

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10rpx 0;
      font-size: 30rpx;
      font-weight: 600;
      color: var(--color1);
      .right {
        display: flex;
        align-items: center;
        font-size: 27rpx;
        font-weight: 500;
        color: var(--color4);
        .icon {
          font-size: 32rpx;
        }
      }
    }

    .content {
      display: flex;
      padding: 20rpx;
      margin-top: 20rpx;
      .item {
        flex: 1;
        width: 0;
        .text {
          font-size: 23rpx;
          color: var(--color4);
        }
        .price {
          margin-top: 12rpx;
          font-weight: 35rpx;
          font-weight: 600;
          color: var(--color1);
        }
      }
    }
  }
}
</style>
